<template>
	<view class="detail">
		<view class="info">
			<view class="header">
				<view class="type-amount">
					<view class="type">
						<view class="icon">
							<image :src="detail.icon_image" mode="widthFix"></image>
						</view>
						<div class="name">{{detail.type_name}}</div>
					</view>
					
					<view class="amount">{{detail.amount}}</view>
					
				</view>
				
				<view class="log">
					<view class="before">变更前：{{detail.before_amount}}</view>
					<view class="before">变更后：{{detail.after_amount}}</view>
				</view>
			</view>
			
			<view class="content">
				<view class="item">
					<view class="left">日期</view>
					<view class="remark">{{detail.date}}</view>
				</view>
				<view class="item">
					<view class="left">付款成员</view>
					<view class="remark">{{detail.user_remark?detail.user_remark:'我'}}</view>
				</view>
				<view class="item">
					<view class="left">记帐时间</view>
					<view class="remark">{{detail.create_time}}</view>
				</view>
				<view class="item">
					<view class="left">资金帐户</view>
					<view class="remark">{{detail.account_name}}</view>
				</view>
				
			</view>
			
			<navigator :url="'add?id='+id" v-if="detail.user_id == userId" class="edit-btn">编辑</navigator>
			
		</view>
	</view>
</template>

<script>
	import base from '../../common/base.js';
	export default {
		data() {
			return {
				id: '',
				detail: {},
				userId: '',
			};
		},
		onLoad(options) {
			
			this.id = options.id;
			var userInfo = uni.getStorageSync('userinfo');
			this.userId = userInfo.id;
		},
		onShow() {
			this.getData();
		},
		methods:  {
			getData: function(){
				var that = this;
				base.base.request({
					data: {id: that.id},
					url: 'funds/detail',
					sCallback: function(res) {
						if(res.code == 200) {
							that.detail = res.data;
						}
						
					}
				});
			}
		}
	}
</script>

<style>
	.detail{
		width: 100%;
		padding: 70upx 40upx;
		box-sizing: border-box;
		font-size: 26upx;
	}
	
	.info{
		flex-direction: column;
		background: #081935;
		color: #BFC0C4;
		width: 100%;
		padding: 60upx 30upx;
		border-radius: 20upx;
		position: relative;
	}
	
	.info image{
		width: 60upx;
		height: 60upx;
		margin-right: 10upx;
	}
	
	.header{
		flex-direction: column;
		border-bottom: 1px dashed #808895;
	}
	
	.header>view{
		justify-content: space-between;
		line-height: 80upx;
	}
	
	.header .type-amount{
		font-size: 40upx;
		line-height: 80upx;
	}
	
	.content{
		flex-direction: column;
	}
	
	.content>view{
		justify-content: space-between;
		line-height: 60upx;
	}
	
	.edit-btn{
		background: #EE504F;
		color: #FFE7E7;
		height: 80upx;
		line-height: 80upx;
		justify-content: center;
		width: 70%;
		text-align: center;
		border-radius: 40upx;
		position: absolute;
		bottom: -40upx;
		left: 15%;
		z-index: 99;
	}
	
</style>
